<template>
  <div>
    <div class="mask"></div>
    <div class="add_wrap">
      <div class="close">
        <p>新建资料</p>
        <i class="el-icon-close" @click="hanldeCloseClerk"></i>
      </div>
      <div class="form_wrap">
        <span class="mr-8"><i>*</i>年份</span>
        <el-date-picker
          class="update-el-date mr-8"
          type="year"
          v-model="yearValue"
          value-format="yy"
          clearable
          placeholder="选择日期"
        >
        </el-date-picker>
        <span class="mr-8"><i>*</i>季度</span>
        <el-select
          class="update-el-select mr-8"
          v-model="quarterValue"
          placeholder="请选择"
        >
          <el-option
            v-for="item in quarterList"
            :key="item.label"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span class="mr-8">后缀</span>
        <el-input
          class="update-input mr-8"
          clearable
          maxlength="2"
          v-model="suffixValue"
        ></el-input>
      </div>
      <div class="hint">
        <div>提示</div>
        <div>
          完整季度名称：<span
            >{{ yearValue }}{{ quarterValue }}{{ suffixValue }}</span
          >
        </div>
      </div>
      <div class="btn_wrap">
        <el-button @click="handleClean">清空</el-button>
        <el-button type="primary" @click="hanldeSaveQuerter">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { addQuarter } from '@/request/baseInfo/K_QuarterDoc'
export default {
  data() {
    return {
      yearValue: '', // 年份
      quarterValue: '', // 季度名称
      suffixValue: '', // 后缀
      value: '',
      quarterList: [
        {
          label: 0,
          value: '春夏'
        },
        {
          label: 1,
          value: '秋冬'
        },
        {
          label: 2,
          value: '春_'
        },
        {
          label: 3,
          value: '夏_'
        },
        {
          label: 4,
          value: '秋_'
        },
        {
          label: 5,
          value: '冬_'
        }
      ]
    }
  },
  methods: {
    // 保存
    async hanldeSaveQuerter() {
      if (!this.yearValue) return this.$message.error('请选择年份')
      if (!this.quarterValue) return this.$message.error('请选择季度')
      let quarterName = `${this.yearValue}${this.quarterValue}${this.suffixValue}`
      const { data } = await addQuarter(quarterName)
      if (data && data.code === 200) {
        this.$message.success(data.msg)
        this.$emit('updateList')
      }
    },
    // 清空
    handleClean() {
      this.yearValue = ''
      this.quarterValue = ''
      this.suffixValue = ''
    },
    // 关闭
    hanldeCloseClerk() {
      this.$emit('hanldeCloseClerk')
    }
  }
}
</script>

<style lang="less" scoped>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 99;
}
.add_wrap {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  // height: 400px;
  padding-bottom: 30px;
  z-index: 99;
  background-color: white;
  overflow: auto;
  .close {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f4f4f4;
    font-weight: 700;
    p {
      margin: 0;
    }
  }
  .form_wrap {
    // width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
    i {
      color: red;
      margin-right: 5px;
    }
  }
  .hint {
    // width: 100%;
    margin-top: 30px;
    margin-left: 20px;
    span {
      color: #017aff;
    }
  }
  .btn_wrap {
    // width: 100%;
    text-align: right;
    margin-top: 30px;
    margin-right: 20px;
  }
}
</style>
